<%--
  Created by IntelliJ IDEA.
  User: K
  Date: 2022/8/13
  Time: 15:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <title>后台管理系统登录</title>

    <meta name="keywords" content="后台管理系统登录模板"/>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
    <link href="${pageContext.request.contextPath}/static/css/popup-box.css" rel="stylesheet" type="text/css"
          media="all"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.magnific-popup.js" type="text/javascript"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/js/modernizr.custom.53451.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/vue.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.popup-with-zoom-anim').magnificPopup({
                type: 'inline',
                fixedContentPos: false,
                fixedBgPos: true,
                overflowY: 'auto',
                closeBtnInside: true,
                preloader: false,
                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-zoom-in'
            });

        });
    </script>

</head>
<body>
<h1>Login</h1>
<div class="w3layouts">
    <div class="signin-agile" id="app">
        <h2>Sign In</h2>
        <form action="${pageContext.request.contextPath}/login" method="post">
            <input type="text" name="employeName" v-model="user.employeName" class="name" placeholder="Username"
                   required="">
            <input type="password" name="employePassword" class="password" placeholder="Password" required="">
            <ul>
                <li>
                    <input type="checkbox" id="brand1">
                    <label for="brand1"><span></span>Remember me</label>
                </li>
            </ul>
            <a href="#">Forgot Password?</a><br>
            <div class="clear"></div>
            <input type="submit" value="Login" @click="loginUser()">
        </form>
    </div>
    <div class="signup-agileinfo">
        <p style="font-weight: bold;font-size: 55px;margin-top: 70px;">安逸酒店</p>
        <h1 style="margin-left: 110px">后台管理系统</h1>
        <%--        <div class="more">--%>
        <%--            <a class="book popup-with-zoom-anim button-isi zoomIn animated" data-wow-delay=".5s" href="#small-dialog">Sign Up</a>--%>
        <%--        </div>--%>
    </div>
    <div class="clear"></div>
</div>
<div class="footer-w3l">
    <p class="agileinfo">安逸酒店后台管理</p>
</div>
<div class="pop-up">
    <div id="small-dialog" class="mfp-hide book-form">
        <h3>Sign Up Form </h3>
        <form action="${pageContext.request.contextPath}/registered/user" method="post">
            <input type="text" name="employeName" placeholder="Your Name" required=""/>
            <input type="text" name="employeAge" placeholder="Age" required=""/>
            <input type="text" name="employeGender" placeholder="Gender" required=""/>
            <input type="password" name="employePassword" class="password" placeholder="Password" required=""/>
            <input type="password" name="ConfirmPassword" class="password" placeholder="Confirm Password" required=""/>
            <input type="submit" value="Sign Up">
        </form>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            user: {
                employeName: "",
                employePassword: ""
            }
        },
        methods: {
            loginUser() {
                var _this = this
                $.ajax({
                    success: function (rs) {
                        console.log("已设置" + _this.user.employeName)
                        localStorage.setItem("loginUsername", _this.user.employeName);
                    }
                })
            }
        }
    })
</script>
</body>
</html>